<template>
  <div class="goods-promotion-form">
    <!-- <h1>这里是商品促销组件</h1> -->
    <el-form
      ref="promotionForm"
      :model="goodsInfo"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="赠送积分">
        <el-input v-model="goodsInfo.giftPoint"></el-input>
      </el-form-item>
      <el-form-item label="赠送成长值">
        <el-input v-model="goodsInfo.giftGrowth"></el-input>
      </el-form-item>
      <el-form-item label="积分购买限制">
        <el-input v-model="goodsInfo.usePointLimit"></el-input>
      </el-form-item>
      <el-form-item label="预告商品">
        <el-switch v-model="goodsInfo.previewStatus"></el-switch>
      </el-form-item>
      <el-form-item label="商品推荐">
        <span class="item-span">新品</span>
        <el-switch v-model="goodsInfo.newStatus"></el-switch>
        <span class="item-span">推荐</span>
        <el-switch v-model="goodsInfo.recommandStatus"></el-switch>
      </el-form-item>
      <el-form-item label="服务保证">
        <el-checkbox-group v-model="goodsInfo.serviceIds">
          <el-checkbox label="无忧退货" name="serviceIds"></el-checkbox>
          <el-checkbox label="快速退款" name="serviceIds"></el-checkbox>
          <el-checkbox label="免费包邮" name="serviceIds"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="详细页标题">
        <el-input v-model="goodsInfo.detailTitle"></el-input>
      </el-form-item>
      <el-form-item label="详细页描述">
        <el-input v-model="goodsInfo.detailDesc"></el-input>
      </el-form-item>
      <el-form-item label="商品关键字">
        <el-input v-model="goodsInfo.keywords"></el-input>
      </el-form-item>
      <el-form-item label="商品备注">
        <el-input type="textarea" v-model="goodsInfo.note"></el-input>
      </el-form-item>
      <el-form-item label="选择优惠方式">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="无优惠" name="first"></el-tab-pane>
          <el-tab-pane label="特惠促销" name="second">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="goodsInfo.promotionStartTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="goodsInfo.promotionEndTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="促销价格">
              <el-input v-model="goodsInfo.promotionPrice" style="width:220px;"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="会员价格" name="third">
            <el-form-item label="黄金会员">
              <el-input v-model="goodsInfo.huangjinPrice" style="width:220px;"></el-input>
            </el-form-item>
            <el-form-item label="白金会员">
              <el-input v-model="goodsInfo.baijinPrice" style="width:220px;"></el-input>
            </el-form-item>
            <el-form-item label="钻石会员">
              <el-input v-model="goodsInfo.zuanshiPrice" style="width:220px;"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="阶梯价格" name="fourth"></el-tab-pane>
          <el-tab-pane label="满减价格" name="fifth"></el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item> 
        <el-col :span="7" :offset="3">
          <el-button @click="lastStep">上一步,填写商品信息</el-button>
        </el-col>
        <el-col :span="7" :offset="2">
          <el-button type="primary" @click="nextStep">下一步,填写商品属性</el-button>
        </el-col>
        
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: "GoodsPromotionForm",
  props: {
    goodsInfo: Object,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {},
    lastStep(){
      this.$emit('lastStep')
    },
    nextStep(){
      this.$emit('nextStep')
    }
  },
};
</script>

<style scoped lang="less">
.item-span {
  margin: 0px 15px;
}
</style>